import React, { Component } from 'react'
import CatelistContainer from './Catelist.style'

export default class Catelist extends Component {

  state={
    currentIndex:0,
    defaultItem:this.props.defaultItem
  }

  menuClick(index,item){
    this.setState({
      currentIndex:index,
      defaultItem:item
    })
  }

  render() {
    let menus =Object.keys(this.props.dataview)
    let key = this.state.defaultItem || menus[0];
    let list = this.props.dataview[key]
    return (
      <CatelistContainer>

        <div>
          <ul>
            {
              menus.map((val,index)=>{
              return  <li 
              key={index}
              onClick={()=>{
                this.menuClick(index,val)
              }}
              className={this.state.currentIndex===index?'active':''}>{val}</li>
              })
            }
          </ul>
        </div>
        
        <div>
        <ul>
          {
           list && list.map((item,index)=>{
            return   <li key={index}>{item}</li>
            })
          }
        
         
        </ul>
        </div>

      </CatelistContainer>
    )
  }
}
